<template>
	<div>
		<div id="kong">
			<img class="kong-img" src="../../img-shopping/pic@2x.png"/>
			<p class="kong-p">这里没有任何商品呢</p>
			<div @click="zhuye()" class="kong-b"><span class="kong-btn">去首页</span></div>
		</div>
		<div class="shopcard-listBox" v-for="(item,index) in orderlist">
			<h3 class="shopcard-title">
				<i><img :src="(item.portrait.indexOf('http:/')==0?item.portrait:'http://www.ntyouxuan.com/'+item.portrait)"/></i>
				<div class="shop-user-xinxi">
					<p v-text="item.buyer_name"></p>
					<span v-text="new Date(Number(item.add_time)*1000).Format('yyyy-MM-dd hh:mm:ss')"></span>
				</div>
				<span class="order-goods-stute" v-if="item.status==11">等待买家付款</span>
				<span v-if="item.status==0" class="order-goods-stute">订单已取消</span>
				<span class="order-goods-stute" v-if="item.status==20">待发货</span>
				<span class="order-goods-stute" v-if="item.status==30">待收货</span>
				<span class="order-goods-stute" v-if="item.status==40">已完成订单</span>
			</h3>
			<ul class="shopcard-list-item-box">
				<li class="shopcard-list-item" v-for="itemlist in item.order_goods">
					<div>
						<router-link :to="{path:'/myorder/orderxq',query:{'orderid':itemlist.order_id}}">
						<img :src="'http://www.ntyouxuan.com/'+itemlist.goods_image"/>
						<div class="shopcard-list-item-xinxi">
							<h3>{{itemlist.goods_name}}</h3>
							<p><span>{{itemlist.specification}}</span>
								<span class="order-tkzt" v-if="itemlist.refund_status&&!(itemlist.refund_status=='SUCCESS')&&!(itemlist.refund_status=='CLOSED')">退款中</span>
								<span class="order-tkzt" v-if="itemlist.refund_status&&itemlist.refund_status=='SUCCESS'">退款成功</span>
								<span class="order-tkzt" v-if="itemlist.refund_status&&itemlist.refund_status=='CLOSED'">退款关闭</span>
							</p>
							<div class="shopcard-item-num">
								<span>￥</span>
								<span>{{itemlist.price_detail[0]}}.</span>
								<span>{{itemlist.price_detail[1]}}</span>
								<p class="shopDd-itemnum">x{{itemlist.quantity}}</p>
							</div>
						</div>	
						</router-link>
					</div>
					
				</li>	
			</ul>
			<div class="shopDd-ddh"><span>订单编号：{{item.order_sn}}</span><span>￥{{item.order_amount}}</span><span>合计</span></div>
			<div class="shopDd-list-czbtn">
				<router-link class="order-ckdd" :to="{path:'/myorder/orderxq',query:{'orderid':item.order_id}}">查看订单</router-link>
				<router-link class="order-ckdd" :to="{path:'/myorder/ntlogistics',query:{'ordertoken':item.order_id,'logis':item.invoice_no}}">查看物流</router-link>
				<span class="order-qfk" v-if="item.status==11" @click="gaijia(item.order_id)">修改价格</span>
				<span class="order-qfk" v-if="item.status==20" @click="fahuo(item.order_id,index,1)">立即发货</span>
				<span class="order-qfk" v-if="item.status==30" @click="fahuo(item.order_id,index,2)">修改单号</span>
			</div>
		</div>
		<fahuo :msg="orderid" :indx="statusfa" v-if="fahuoshow" @fahuosuc="sucessfa"></fahuo>
		<gaijia :msg="orderid" v-if="gaijiashow" @gaijiasuc="sucessgai"></gaijia>
	</div>
</template>

<script>
	import gaijia from "@/components/business-group/ordergaijia"
	import fahuo from "@/components/business-group/orderfahuo"
	export default{
		data () {
			return{
				user:0,
				ordertype:'accepted',
				orderlist:[],
				pagenum:0,
				orderpage:1,
				scrollstatu:true,
				orderid:"",
				ind:"",
				statusfa:'',
				fahuoshow:false,
				gaijiashow:false
			}
		},
		components:{gaijia,fahuo},
		created:function(){
			this.user=localStorage.getItem("nt_user");
			this.shoporderajax();
		},
		methods:{
			sucessfa:function(data){
				if(data){
					var item=this.orderlist[this.ind];
					item.status=30;
					this.orderlist.splice(this.ind,1,item);
					this.fahuoshow=false;
				}else{
					this.fahuoshow=false;
				}
			},
			zhuye: function() {
				window.location.href = 'http://www.ntyouxuan.com/newnt/#/';
			},
			sucessgai:function(data){
				this.gaijiashow=false;
			},
			gaijia:function(id){
				this.orderid=id;
				this.gaijiashow=true;
			},
			fahuo:function(id,ind,num){
				this.orderid=id;
				this.statusfa=num;
				this.ind=ind;
				this.fahuoshow=true;
			},
			shoporderajax:function(){
				var self=this;
				$.ajax({
					type:"get",
					url:furl+"index.php?app=ajax_seller_member&act=my_order_index",
					data:{'token':self.user,'type':self.ordertype,'page':self.orderpage},
					dataType:'json',
					success:function(res){
						self.orderlist=self.orderlist.concat(res.retval.orders);
						self.pagenum=res.retval.page.page_count;
						self.scrollstatu=true;
						self.panum=res.retval.page.item_count;
						if (self.panum != 0) {
							$('#kong').css("display","none");
						}
					}
				});
			},
			scrollajax:function(){
				if(this.scrollstatu){
					if(this.orderpage+1<=this.pagenum){
						var dSH=$(document).scrollTop()
						var dH=$(document).height()
						var wH=$(window).height()
						if((dSH+wH)/dH>0.8){
							this.scrollstatu=false;
							this.orderpage=this.orderpage+1;
							console.log(this.orderpage);
							this.shoporderajax();
						}
					}
					
				}
			}
		},
		mounted (){
			var self=this;
			window.addEventListener("scroll",self.scrollajax);
		},
		destroyed:function () {
		    this.scrollstatu = false;
		}
	}
</script>

<style>
	#kong{
		text-align: center;
		margin: 0 auto;
		margin-top: 2.2rem;
	}
	#kong img{
		width: 3.6rem;
		height: 3.2rem;
	}
	#kong .kong-p{
		font-size: 0.32rem;
		color: #999999;
		margin-top: 0.84rem;
	}
	#kong .kong-b{
		width: 1.8rem;
		height: 0.7rem;
		border:1px solid #fb9722;
		margin-left:2.85rem;
		margin-top: 0.44rem;
		border-radius: 0.35rem;
	}
	#kong .kong-btn{
		font-size: 0.33rem;
		color: #fb9722;
		line-height: 0.7rem;
	}
</style>